<template>
  <div>
      <div class='banner' v-show="isShow" @click="lookImgs">
        <img class='banner-img' :src="bannerData.gallaryImgs[0]">
        <div class="banner-info">
          <span class='banner-title'>{{bannerData.sightName}}</span>
          <p class='banner-number'>
            <i class="iconfont icon-tupian"></i>
            <span>{{bannerData.gallaryImgs.length}}</span>
          </p>
        </div>
      </div>
			
			<div class="gallary" v-show="!isShow" @click="lookImgs">
				<div class="wrapper">
				  <swiper :options="swiperOption">
				    <!-- slides -->
				    <swiper-slide v-for='(img,index) in bannerData.gallaryImgs' :key='index'>
				      <img class='swiper-img' :src="img" alt="">
				    </swiper-slide>
				    <!-- Optional controls -->
				    <div class="swiper-pagination" slot="pagination"></div>
				  </swiper>
				</div>
			</div>
  </div>
</template>

<script>
export default {
	name:'LikeBanner',
	props: ["bannerData"],
	data(){
		return {
			swiperOption: {
			  pagination: {
			    el: '.swiper-pagination',
			    type:'fraction'
			  },
			  observeParents:true,
			  observer:true
			},
			isShow: true,
		}
	},
	methods:{
		lookImgs(){
			this.isShow = !this.isShow;
		}
	}
}
</script>

<style lang='stylus' scoped>
.banner
	position:relative
	height:0
	padding-bottom:55%
	overflow:hidden
	.banner-img
		margin-top:-30px
		width:100%
	.banner-info
		position:absolute
		left:0
		right:0
		bottom:0
		color:#fff
		background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1))
		line-height:.6rem
		.banner-title
			font-size: .32rem
			padding: 0 .2rem
		.banner-number
			position:absolute
			right:0
			top:0
			height: .36rem
			line-height: .36rem
			margin-top: .14rem
			padding: 0 .4rem
			border-radius: .2rem
			background: rgba(0, 0, 0, .8)
			font-size: .24rem
.wrapper >>> .swiper-container
	overflow:inherit
.gallary
	position:fixed
	z-index:10
	left:0
	right:0
	top:0
	bottom:0
	background:#000
	.wrapper
		position:absolute
		top:0
		bottom:0
		margin:auto
		height:0
		width:100%
		padding-bottom:62.5%
		background:#fff
	.swiper-img
		width:100%
	.swiper-pagination
		bottom:-1rem
		color:#fff
</style>
